// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';

// 组件引入
import {Item} from './Item';

// 样式引入
import styles from './style.module.less';

@observer
class ResourcesNavBar extends Component {
  render() {
    return (
      <div
        className={classNames(styles.resourcesNavBar, this.props.className)}
        style={this.props.style}>
        <div className="container clearfix">
          <nav className={styles.nav}>
            {this
              .props
              .data
              .map(item => (<Item
                className={styles.resourcesNavBar_link}
                key={item.id}
                to={item.to}
                iconType={item.iconType}
                value={item.value}/>))}
          </nav>
        </div>
      </div>
    );
  }
}

ResourcesNavBar.defaultProps = {
  data: [
    {
      id: '1',
      to: '/',
      iconType: 'book',
      value: '中文文档'
    }, {
      id: '2',
      to: '/',
      iconType: 'home',
      value: '官网'
    }, {
      id: '3',
      to: '/',
      iconType: 'github',
      value: '源码'
    }, {
      id: '4',
      to: '/',
      iconType: 'github',
      value: 'README'
    }
  ]
};

const InjectResourcesNavBar = inject(({
  someStore = {}
}) => ({someProps: someStore.attribute}))(ResourcesNavBar);

export {ResourcesNavBar, InjectResourcesNavBar};